<template>
    <div class="contactUs">
        <div class="contactUs_title">{{ $t('customer_service') }}</div>
        <div style="text-align: center;">
            <img width="200px" src="../../../assets/contactUs.png" class="contactUs-content-image_3uf1P">
            <div class="contactUs_main">
                <svg t="1721905267285" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7742" width="20" height="20"><path d="M546.986667 1024H56.490667A56.533333 56.533333 0 0 1 0 967.466667V56.533333C0 25.301333 25.301333 0 56.533333 0h910.933334C998.698667 0 1024 25.301333 1024 56.533333v910.933334c0 31.232-25.301333 56.533333-56.533333 56.533333H706.56v-396.544h133.12l19.882667-154.538667H706.56V374.186667c0-44.714667 12.373333-75.221333 76.586667-75.221334h81.834666v-138.24c-14.165333-1.92-62.72-6.101333-119.253333-6.101333-118.016 0-198.784 72.021333-198.784 204.288v113.92H413.525333v154.581333h133.418667V1024z" fill="#3B5998" p-id="7743"></path></svg>

                <a :href="fb_url" target="_blank">
                    <p>{{ $t('to_Facebook_customer_service') }}</p>
                </a>
            </div>      
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
let fb_url = ref('')
if(localStorage.getItem('lang') == 'en'){
  fb_url = 'https://www.facebook.com/profile.php?id=61564549723234'
}else{
  fb_url = 'https://www.facebook.com/YYTwo2/'
}
</script>

<style lang="less" scoped>
.contactUs{
    .contactUs_title {
        font-size: 24px;
        color: rgba(0, 0, 0, .8);
        letter-spacing: 1px;
        line-height: 32px;
    }
    img{
        margin: auto;
    }
    .contactUs_main{
        display: flex;
        height: 40px;
        line-height: 40px;
        background-color: #d3f2ff;
        font-weight: bold;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        a{
            margin: 0;
            color: #000;
        }
        .icon{
            margin: 0;
        }
        p{
            // width: 40%;
            text-align: center;
            margin: 0;
            margin-left: 5px;
            font-size: 13px;
        }
    }
    .contactUs_main:hover{
        background-color: #b2e2f6;
        p{
            text-decoration: underline;
        }
    }

}
</style>